import React, { FC, memo } from 'react';
import Translation from 'components/Translation';
import styles from './index.css';
import { Card } from '@alicloud/console-components';

interface IPorps {
  enable: boolean;
  handleSelectEnv: (mode: string) => void;
}

const K8S = 'k8s';
const PUBLIC = 'public';
const SettingSelectEnv: FC<IPorps> = ({ enable, handleSelectEnv }) => {

  const handleClick = (key: string) => {
    if (enable) {
      handleSelectEnv(key);
    }
  };

  return (
    <div className={styles.content}>
      <h1>
        <Translation>Please select the environment you want to install</Translation>
      </h1>
      <div className={styles.container}>
        <ul>
          <li
            onClick={() => handleClick(PUBLIC)}
          >
            <Card className={styles['install-card']}>
              <span className={styles['install-card-text']}>
                <span>
                  <Translation>Host</Translation>
                  <div className={styles.txc} style={{ marginTop: '10px', display: 'flex', justifyContent: 'center' }}>
                    <img
                      src=""
                      alt=""
                      style={{ width: 64, height: 64 }}
                    />
                  </div>
                </span>
              </span>
            </Card>
          </li>
          <li
            onClick={() => handleClick(K8S)}
          >
            <Card className={enable ? styles['install-card'] : styles['card-disable']}>
              <span className={styles['install-card-text']}>
                <span>
                  <Translation>Self-built Kubernetes</Translation>
                  <div className={styles.txc} style={{ marginTop: '10px' }}>
                    <img
                      src=""
                      alt=""
                    />
                  </div>
                </span>
              </span>
            </Card>
          </li>
        </ul>
      </div>
    </div>
  );
};

export default memo(SettingSelectEnv);
